<template>
<div id="">
    <tab-bar>
        <tab-bar-item path="/home" activeColor="green">
            <!-- <img  slot="item-icon" src="./assets/img/tabBarImg/index.png" alt="" />
        <div slot="item-text">首页</div> -->
            <template v-slot:item-icon>
                <img src="@/assets/img/tabBarImg/index.png" alt="" />
            </template>
            <template v-slot:item-icon-active>
                <img src="@/assets/img/tabBarImg/index1.png" alt="" />
            </template>
            <template v-slot:item-text> 首页 </template>
        </tab-bar-item>
        <tab-bar-item path="/news" activeColor="blue">
            <template v-slot:item-icon>
                <img src="@/assets/img/tabBarImg/news.png" alt="" />
            </template>
            <template v-slot:item-icon-active>
                <img src="@/assets/img/tabBarImg/news1.png" alt="" />
            </template>
            <template v-slot:item-text> 新闻 </template>
        </tab-bar-item>
        <tab-bar-item path="/cart" activeColor="yellow">
            <template v-slot:item-icon>
                <img src="@/assets/img/tabBarImg/cart.png" alt="" />
            </template>
            <template v-slot:item-icon-active>
                <img src="@/assets/img/tabBarImg/cart1.png" alt="" />
            </template>
            <template v-slot:item-text> 购物车 </template>
        </tab-bar-item>
        <tab-bar-item path="/profile" activeColor="pink">
            <template v-slot:item-icon>
                <img src="@/assets/img/tabBarImg/my.png" alt="" />
            </template>
            <template v-slot:item-icon-active>
                <img src="@/assets/img/tabBarImg/my1.png" alt="" />
            </template>
            <template v-slot:item-text>
                <div>我的</div>
            </template>
        </tab-bar-item>
    </tab-bar>
</div>
</template>

<script>
import TabBar from "./tabbar";
import TabBarItem from "./TabBarItem";
export default {
    name: "TabBarMain",
    data() {
        return {};
    },
    components: {
        TabBar,
        TabBarItem,
    },
};
</script>

<style scoped>
#tabBarItem>img {
    display: block;
    width: 20px;
    height: 20px;
}
</style>
